<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { addFB, getFB, deleteFB } from "../api/api";
const input = ref('')
const tableData = ref()
const money = ref()
const centerDialogVisible = ref(false)
onMounted(() => {
    userFB()
})
//获取数据
const userFB = async () => {
    const res = await getFB()
    tableData.value = res.data.data
}
const deleteRow = async (e: string) => {
    const res = await deleteFB({ _id: e })
    tableData.value = res.data.data
}
//添加数据
const sendData = async () => {
    centerDialogVisible.value = false
    const res = await addFB({ data: input.value,money:money.value })
    tableData.value = res.data.data
}
</script>

<template>

    <el-dialog v-model="centerDialogVisible" title="添加fb账号" width="500" align-center>
        <span>
            <el-input v-model="money" placeholder="添加金额" style="margin-bottom: 10px;" />
            <el-input v-model="input" :autosize="{ minRows: 8, maxRows: 12 }" type="textarea" placeholder="添加fb账号" />
        </span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="sendData">确定</el-button>
            </div>
        </template>
    </el-dialog>


    <el-scrollbar>
        <div class="inputBtn">
            <el-button type="success" @click="centerDialogVisible = true">发布</el-button>
        </div>
        <el-table :data="tableData">
            <el-table-column prop="_id" label="id" width="300" />
            <el-table-column prop="FB" label="fb账号" width="1000" />
            <el-table-column prop="money" label="金额" width="100" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="danger" size="small" @click.prevent="deleteRow(scope.row._id)">
                        删除此数据
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-scrollbar>
</template>

<style scoped>
.inputBtn {
    width: 25%;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
}
</style>